<!-- 校区状态 -->
<template>
  <div class="dashboard-editor-container">
    <div class="xxx" style="margin-top: 10px;">
      <div style="display:flex;justify-content:space-between;">
        <partitionTree :nodeData="nodeData" :addTemplate="false" @handleNodeClick="handleNodeClick" ref="partitionTree" @toggleVisibility="toggleVisibility"></partitionTree>
        <div :style="{ width:containerWidth}"  class="box" style="background:#fff;padding:20px;border: 1px solid #ddd;border-radius: 4px;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);">
          <!-- <el-button type="primary" @click="addModer">添加校区</el-button> -->
          <!-- <tree-transfer></tree-transfer> -->
          <connsearch ref="connsearch" :formOptions="formOptions" @search="search" @reset="reset">
            <el-button type="primary" size="small" @click="restart_Device">重启设备</el-button>
          </connsearch>
          <el-table stripe border :data="tableData" style="width: 100%; margin-top: 15px" height="640">
            <el-table-column label="序号" width="80" type="index" :index='(index) => { return (index + 1) + (pageNum - 1) * pageSize }'> </el-table-column>
            <!-- <el-table-column label="所在分区" prop="Department" width="80" align="left" show-overflow-tooltip></el-table-column> -->
            <el-table-column label="所在分区" prop="PrimArea" width="150" align="left" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{ row.PrimArea }} / {{ row.SecondArea }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="校区编码" prop="SchoolID"  align="left" show-overflow-tooltip></el-table-column> -->
            <el-table-column label="校区名称" prop="SchoolName" width="100" align="left" show-overflow-tooltip></el-table-column>
            <el-table-column label="在线状态" prop="Status_Time" width="180" align="left" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>
                  <span style="color:#67C23A" v-if="row.Status === 1" type="success">在线</span>
                  <span style="color:#F56C6C" v-if="row.Status !== 1" type="danger">离线</span>
                  <span v-if="row.LastReportStatusTime&&row.StatusChangeTime">--{{ row.StatusChangeTime }}</span>
                  <!-- <span v-if="row.LastReportStatusTime">--{{ row.Status_Time }}</span> -->
                  <span v-else>--初始化</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="运行时长" prop="KeepRunningTime" width="120" align="left" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{ row.KeepRunningTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="设备版本" prop="Version" width="120" align="left" show-overflow-tooltip></el-table-column>
            <el-table-column label="公司网址" prop="FromIP"  align="left" show-overflow-tooltip></el-table-column>
            <el-table-column label="内网地址" prop="CurrentIP"  align="left" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column label="今日事件" prop="TodayEventCount" align="left" show-overflow-tooltip></el-table-column> -->
            <el-table-column label="操作" width="100px" align="left" fixed="right" >
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="LookDetails(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination 
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" 
            :current-page=pageNum
            :page-size=pageSize
            background 
            layout="total, prev, pager, sizes, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog v-el-drag-dialog title="设备详情" :close-on-click-modal="false" :visible.sync="dialogTableVisible"  width="70%">
      <el-tabs type="border-card">
        <el-tab-pane label="设备信息">
          <div>
            <el-row>
              <el-descriptions title="设备基本信息" class="margin-top" :column="3"  border>
                <el-descriptions-item label="所在分区">{{ dialogForm.PrimArea }}/{{ dialogForm.SecondArea }}</el-descriptions-item>
                <el-descriptions-item label="校区名称">{{ dialogForm.SchoolName }}</el-descriptions-item>
                <el-descriptions-item label="校区编码">{{ dialogForm.SchoolID }}</el-descriptions-item>
                <el-descriptions-item label="校区联系人">{{ dialogForm.Contact }}</el-descriptions-item>
                <el-descriptions-item label="邮箱">{{ dialogForm.EMail }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ dialogForm.Phone }}</el-descriptions-item>
                <el-descriptions-item label="地址">{{ dialogForm.Address }}</el-descriptions-item>
                <el-descriptions-item label="备注信息">{{ dialogForm.Descp }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ dialogForm.CreateTime }}</el-descriptions-item> 
              </el-descriptions>
            </el-row>
            <el-row>
              <el-descriptions title="设备动态信息" style="margin-top:20px" :column="2" border>
                <el-descriptions-item label="设备状态">
                  <span>
                    <span style="color:#67C23A" v-if="dialogForm.Status === 1" type="success">在线</span>
                    <span style="color:#F56C6C" v-if="dialogForm.Status !== 1" type="danger">离线</span>
                  </span>
                </el-descriptions-item>
                <el-descriptions-item label="最近状态变更时间">
                  <span v-if="dialogForm.LastReportStatusTime">{{ dialogForm.StatusChangeTime }}</span>
                  <span v-else>初始化</span>
                </el-descriptions-item>
                <el-descriptions-item label="设备软件版本">{{ dialogForm.Version }}</el-descriptions-item>
                <el-descriptions-item label="设备公网IP">{{ dialogForm.FromIP }}</el-descriptions-item>
                <el-descriptions-item label="设备内网IP">{{ dialogForm.CurrentIP }}</el-descriptions-item>
                <el-descriptions-item label="设备mac">{{ dialogForm.Mac }}</el-descriptions-item>
                <el-descriptions-item label="CPU使用率">
                    <div style="width:80%">
                      <el-progress :stroke-width="10" :percentage="dialogForm.CPUUsedPert" /> 
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="内存使用率">
                    <div style="width:80%">
                      <el-progress :stroke-width="10" :percentage="dialogForm.MemUsedPct" /> 
                    </div>
                </el-descriptions-item>
                 <el-descriptions-item label="系统磁盘使用率"  >
                  <div style="display: flex; align-items: center;justify;justify-content: space-between;">
                    <div style="width:80%">
                      <el-progress :stroke-width="10" :percentage="dialogForm.DiskUsedPct" /> 
                    </div>
                    <span>{{ dialogForm.DiskUsed }}/{{ dialogForm.DiskTotal }}</span>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="扩展磁盘使用率">
                  <div style="display: flex; align-items: center;justify;justify-content: space-between;">
                    <div style="width:80%">
                      <el-progress :stroke-width="10" :percentage="dialogForm.DiskSoftPct" /> 
                    </div>
                    <span>{{ dialogForm.DiskSoftUsed }}/{{ dialogForm.DiskSoftTotal }}</span>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="设备运行时长">{{ dialogForm.KeepRunningTime }}</el-descriptions-item>
                <el-descriptions-item label="通讯SocketID">{{ dialogForm.ChanelID }}</el-descriptions-item>
              </el-descriptions>
            </el-row>

          </div>
        </el-tab-pane>
        <el-tab-pane label="资产状态">
          <el-table stripe border :data="assertsForm" style="width: 100%; margin-top: 15px" height="400">
            <el-table-column label="序号" width="80" type="index" :index='(index) => { return (index + 1) + (pageNum_assets - 1) * pageSize_assets }'> </el-table-column>
            <!-- <el-table-column label="所在分区" prop="Department" width="80" align="left" show-overflow-tooltip></el-table-column> -->
            <el-table-column label="所在分区" prop="PrimArea" width="150" align="left" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{ row.PrimArea }} / {{ row.SecondArea }}</span>
              </template>
            </el-table-column>
            <el-table-column label="所在校区" prop="SchoolName"  align="left" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{ row.SchoolName }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="资产编码" prop="DeviceID"  align="left" show-overflow-tooltip></el-table-column> -->
            <el-table-column label="资产名称" prop="DeviceName" width="180" align="left" show-overflow-tooltip>
              <template slot-scope="{row}">
                  <span>{{ row.DeviceName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="所在教室" prop="ClassName"  align="left" show-overflow-tooltip />
            <el-table-column label="资产备注" prop="UseName"  align="left" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作系统" prop="ComputerName"  align="left" show-overflow-tooltip></el-table-column>
            <el-table-column label="资产类型" prop="OsInfo"  align="left" show-overflow-tooltip></el-table-column>
            <el-table-column label="在线状态" prop="Status_Time" width="180" align="left" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>
                  <span style="color:#67C23A" v-if="row.Status === 1" type="success">在线</span> 
                  <span style="color:#F56C6C" v-if="row.Status !== 1" type="danger">离线</span>
                  <span v-if="row.LastReportStatusTime&&row.StatusChangeTime">--{{ row.StatusChangeTime }}</span>
                  <!-- <span v-if="row.LastReportStatusTime">--{{ row.Status_Time }}</span> -->
                  <span v-else>--初始化</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="运行时长" prop="KeepRunningTime"  align="left" show-overflow-tooltip />
            <!-- <el-table-column label="今日事件" prop="TodayEventCount"  align="left" show-overflow-tooltip /> -->
          </el-table>
          <el-pagination 
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" 
            :current-page=pageNum
            :page-size=pageSize
            background 
            layout="total, prev, pager, sizes, next, jumper"
            :total="assets_total">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="今日事件">
            <el-table stripe border :data="eventTable" style="width: 100%; margin-top: 15px">
            <el-table-column label="序号"  width="60" type="index" :index='(index)=>{return (index + 1) + (this.pageNum - 1)*this.pageSize}'> </el-table-column>
            <el-table-column label="发生时间" prop="TransTime" width="160px" align="left"></el-table-column>
            <el-table-column label="事件类型" prop="EventID" align="left"></el-table-column>
            <el-table-column label="所在分区" prop="PrimArea" width="150" align="left" show-overflow-tooltip>
                <template slot-scope="{row}">
                  <span>{{ row.PrimArea }} / {{ row.SecondArea }}</span>
                </template>
              </el-table-column>
            <el-table-column label="所在校区" prop="SchoolName" align="left">
              <template slot-scope="{row}">
                <span>{{ row.SchoolName }}({{ row.SchoolID }})</span>
              </template>
            </el-table-column>
            <el-table-column label="资产名称" prop="DeviceName"  width="180" show-overflow-tooltip align="left">
              <template slot-scope="{row}">
                  <span>{{ row.DeviceName }}({{ row.DeviceID }})</span>
              </template>
            </el-table-column>
            <el-table-column label="严重性等级" prop="EventLevel" align="left">
              <template slot-scope="{row}">
                <span style="color:#F56C6C" v-show="row.EventLevel == '1'">紧急</span>
                <span style="color:#E6A23C" v-show="row.EventLevel == '2'">重要</span>
                <span style="color:#909399" v-show="row.EventLevel == '3'">默认</span>
                <span style="color:#409EFF" v-show="row.EventLevel == '4'">普通</span>
                <span style="color:#67C23A" v-show="row.EventLevel == '5'">告知</span>
              </template>
            </el-table-column>
            <el-table-column label="描述信息" prop="Descp" align="left"></el-table-column>
            <el-table-column label="确认状态" prop="IsACK" align="left">
              <template slot-scope="{row}">
                <span style="color:#909399" v-show="row.IsACK == '0'">未确认</span>
                <span style="color:#67C23A" v-show="row.IsACK == '1'">已确认</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="操作" align="left" width="80px" fixed="right">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="changeMailGlobal(scope.row)">确认</el-button>
              </template>
            </el-table-column> -->
          </el-table>
          <el-pagination 
            @size-change="handleSizeChangeEvent"
            @current-change="handleCurrentChangeEvent" 
            :current-page=EventpageNum
            :page-size=EventpageSize
            background 
            layout="total, prev, pager, sizes, next, jumper"
            :total="Eventtotal">
          </el-pagination>
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button type="info" @click="dialogTableVisible = false;">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog v-el-drag-dialog title="请选择设备" :close-on-click-modal="false" :visible.sync="dialogDeviceVisible" width="50%">
      <tree-transfer 
            :title="['待选择','已选择']"
            :from_data='fromData' 
            :to_data='toData'               
            :defaultProps="{label:'label'}"
            ref="myTransfer" 
            :transferOpenNode="false"
            filter     
            >  
      </tree-transfer>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">重 启</el-button>
        <el-button type="info" @click="dialogDeviceVisible = false">取 消</el-button>
        <!-- , reSource = [], $set(reSource, 'isSelected', false)" -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import connsearch from "@/components/connSearch";
import treeTransfer from 'el-tree-transfer'
import { connrequest, GetEventLog } from '@/api/firstPage'
import { parseTime, getuuid, recursiveGetNodePath, recursiveGetChildNodePath,formatDuration,getNowDay,formatTime } from '@/utils/index'
import elDragDialog from "@/directive/el-drag-dialog"; 
import partitionTree from "@/components/partitionTree"; 
export default {
  // directives: { elDragDialog ,treeTransfer},
  directives: { elDragDialog , treeTransfer},
  components: {
    partitionTree,connsearch,treeTransfer
  },
  data() {
    let that = this
    return {  
      pageNum: 1,
      pageSize: 10,
      pageNum_assets: 1,
      pageSize_assets: 10,
      Device_pageNum: 1,
      Device_pageSize: 10,
      pageSize: 10,
      total: 0,
      assets_total:0,
      containerWidth: 'calc(100% - 240px)',
      tableData: [],
      nodeData: [],
      Action: 1,
      Moder: {},
      dialogTableVisible: false,
      dialogDeviceVisible: false,
      reSource: [],
      partitionList: [],
      choseArea: {},
      rules:{
        SchoolID: [
          {required: true, message: '请选择校区编码', trigger: 'blur'}
        ],
        SchoolName: [
          {required: true, message: '请选择校区名称', trigger: 'blur'}
        ],
        PrimArea: [
          {required: true, message: '请选择上级分区', trigger: 'change'}
        ],
        SecondArea: [
          {required: true, message: '请输入分区名称', trigger: 'blur'}
        ],
        AreaCode: [
          {required: true, message: '请输入分区编码', trigger: 'blur'}
        ],
        ClassName: [
          {required: true, message: '请输入教室', trigger: 'blur'}
        ],
        Phone: [
          {required: true, message: '请输入联系电话', trigger: 'blur'},
          {
            validator: function(rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false && value) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        DeviceClass: [
          {required: true, message: '请选择操作系统', trigger: 'change'}
        ],
        DeviceType: [
          {required: true, message: '请选择资产类型', trigger: 'change'}
        ]
      },
      searchform:{},
      formOptions: [
        {
          col: 4,
          hidden: false,
          label: "在线状态", // label文字
          prop: "Status", // 字段名
          element: "el-select", // 指定elementui组件
          initValue: 0, // 字段初始值,
          placeholder: "请选择在线状态", // elementui组件属性
          options: [
            { label: '全部', value: 0 },
            { label: '在线', value: 1 },
            { label: '离线', value: 2 }
          ],
          rules: [], // elementui组件属性
          events: {
            input(val) {
              that.searchform.Status = val
            }
          }
        },
        
        {
          col: 8,
          label: "校区名称关键字", // label文字
          labelWidth:'150px',
          prop: "SchoolName", // 字段名
          element: "el-input", // 指定elementui组件
          placeholder: "请输入描述信息,支持模糊查询。", // elementui组件属性
          maxlength: 50,
          events: {
            input(val) {
              that.searchform.SchoolName = val
            }
          }
        },
        {
          col: 4,
          hidden: false,
          label: "排序字段", // label文字
          prop: "Sort_value", // 字段名
          element: "el-select", // 指定elementui组件
          initValue: "SchoolName", // 字段初始值,
          placeholder: "请选择排序字段", // elementui组件属性
          options: [
            { label: '校区名称', value: 'SchoolName' },
            { label: '在线状态', value: 'Status' },
            { label: '运行时长', value: 'KeepRunningTime' }
          ],
          events: {
            input(val) {
              that.searchform.Sort_value = val
            }
          }
        }
      ],
      dialogForm:[],
      assertsForm:[],
      eventTable:[],
      EventpageNum: 1,
      EventpageSize: 10,
      Eventtotal:0,
      total: 0,
      arr_divece:[],
      selectedSchools: [], // 存放选中学校的数组
      loading: false,
      fromData: [], // 存储传输的数据
      toData:[],
      lastLevelLeafNodes: [],
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.pageSize = Cookies.get('DefaultPageLength') * 1
    this.$set(this.searchform,'Status', 0)
    this.$set(this.searchform,'Sort_value','SchoolName' )
    this.getData()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  }, 

  methods: {
    initializefromData(devieData) {
      this.fromData = this.convertToTree(devieData)
    },
    convertToTree(flatData) {
      const tree = [];
      const generateRandomId = () => {
        // You can implement your own logic to generate a random ID
        return Math.random().toString(36).substr(2, 9);
      };

      flatData.forEach(item => {
        const cityNode = tree.find(node => node.label === item.PrimArea);

        if (cityNode) {
          const districtNode = cityNode.children.find(node => node.label === item.SecondArea);

          if (districtNode) {
            districtNode.children.push({
              key: generateRandomId(),
              label: item.SchoolName,
              info: [item.PrimArea,item.SecondArea,item.SchoolName,item.SchoolID],
              id:generateRandomId(),
              pid: districtNode.label,
            });
          } else {
            const secondAreaId = generateRandomId();
            cityNode.children.push({
              key: secondAreaId,
              label: item.SecondArea,
              id: secondAreaId,
              pid: cityNode.label,
              children: [
                {
                  key: generateRandomId(),
                  label: item.SchoolName, 
                  info: [item.PrimArea,item.SecondArea,item.SchoolName,item.SchoolID],
                  id:generateRandomId(),
                  pid: secondAreaId,
                },
              ],
            });
          }
        } else {
          const primAreaId = generateRandomId();
          const secondAreaId = generateRandomId();
          tree.push({
            key: primAreaId,
            label: item.PrimArea,
            id: primAreaId,
            pid: null, // Assuming the top-level node has no parent
            children: [
              {
                key: secondAreaId,
                label: item.SecondArea,
                id: secondAreaId,
                pid: primAreaId,
                children: [
                  {
                    key: generateRandomId(),
                    label: item.SchoolName,
                    info: [item.PrimArea,item.SecondArea,item.SchoolName,item.SchoolID],
                    id:generateRandomId(),
                    pid: secondAreaId,
                  },
                ],
              },
            ],
          });
        }
      });
      return tree;
    },
    async getData() {
      const res = await connrequest('GetSchoolStatusSumTree')
      let partitionList = []
      res.Data.PrimName = res.Data.RootName //因为后端返回的所有分区名字叫RootName，子菜单又叫PrimAreaName, 这里做个转换
      this.RootName = res.Data.RootName
      res.Data.disabled = true
      res.Data.edit = false
      res.Data.PrimArea.map(item => {
        item.edit = false
        partitionList.push(item)
      })
      this.nodeData = [this.transformData(res.Data)]
      // console.log(this.nodeData);
      this.partitionList = partitionList
      this.GetDictArea(this.choseArea)
    },
    transformData(inputData) {
      const { RootName, OffLineCount, OnlineCount, PrimArea} = inputData;
        return {
          Name: RootName,
          level: 1,
          Count: `${OnlineCount} / ${OnlineCount + OffLineCount}`,
          Children: PrimArea.map(area => ({
            Name: area.PrimAreaName,
            Count: `${area.OnlineCount} / ${area.OnlineCount + area.OffLineCount}`,
            level: 2,
            Children: area.SecondArea.map(secondArea => ({
              Name: secondArea.SecondAreaName,
              Count: `${secondArea.OnlineCount} / ${secondArea.OnlineCount + secondArea.OffLineCount}`,
              level: 3,
              onlineCount: secondArea.OnlineCount,
              offLineCount: secondArea.OffLineCount
          }))
        }))
      }
    },
    process_Time(P_time)
    {
      let d = Math.floor(P_time / 3600 / 24);
      let h = Math.floor((P_time  % 86400) / 3600);
      var m = Math.floor(((P_time % 86400) % 3600) / 60);
      P_time = `${d < 1 ? '' : d}${d < 1 ? '' : '天'} ${d < 1 &&h<1? '' : h}${d < 1 &&h<1? '' : '时'} ${m}分钟`;
      return P_time
    },
    async GetDictArea(obj){
      const data = {
        Paging:{
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
        Filter:{
          PrimArea: '',
          SecondArea: "",
          SchoolName: this.searchform.SchoolName,
          Status:  this.searchform.Status,
          OrderBy: this.searchform.Sort_value,
          ...obj
        }
      }
      const res = await connrequest('GetSchool', data) 
      // console.log("获取校区详细数据",res); 
      
      res.Data.map(item => { 
        item.KeepRunningTime = formatDuration(item.KeepRunningTime)
        item.onlineTotal  = item.OnlineDeviceCount +item.OfflineDeviceCount
        const currentTimeStamp = new Date().getTime();
        console.log(formatDuration(currentTimeStamp/1000 - item.LastReportStatusTime));
      //  item.Status_Time = formatDuration(currentTimeStamp/1000 - item.LastReportStatusTime)
        item.StatusChangeTime =currentTimeStamp/1000 >= item.StatusChangeTime ? formatDuration(currentTimeStamp/1000 - item.StatusChangeTime):0
        // console.log("time",timeDifferenceInMinutes,item.Status_Time);
        item.CreateTime = parseTime(item.CreateTime)
        // item.LastReportStatusTime_copy = parseTime(item.LastReportStatusTime)
        item.StatusChangeTime = formatTime(item.StatusChangeTime)
        item.DiskUsedPct = !item.Disk_Sys_Total? 0: ((item.Disk_Sys_Used / item.Disk_Sys_Total) * 100).toFixed(1) * 1
        item.DiskUsed = (item.Disk_Sys_Used / 1000000).toFixed(2) + 'G'
        item.DiskTotal = (item.Disk_Sys_Total / 1000000).toFixed(0) + 'G'
        item.MemUsedPct = !item.Memeory_Total?0:((item.Memeory_Used / item.Memeory_Total) * 100).toFixed(1) * 1
        item.DiskSoftPct = !item.Disk_Software_Total?0:((item.Disk_Software_Used / item.Disk_Software_Total) * 100).toFixed(1) * 1
        item.DiskSoftUsed = !item.Disk_Software_Used?0+ 'G':(item.Disk_Software_Used / 1000000).toFixed(2) + 'G'
        item.DiskSoftTotal = !item.Disk_Software_Total?0+ 'G':(item.Disk_Software_Total / 1000000).toFixed(0) + 'G'
        
      })
      this.tableData = res.Data
      // console.log("ddd",this.tableData);
      this.total = res.Paging.TotalCount
    },
    handleNodeClick(nodeData){
      const {node} = nodeData
      let arr = node.level === 1 ? recursiveGetChildNodePath(node, []) : recursiveGetNodePath(node, [])
      let obj = {}
      node.level === 1 ? '' : node.level === 2 ? obj.PrimArea = node.data.Name : obj.SecondArea = node.data.Name
      this.choseArea = obj
      this.PrimArea = arr
      this.$set(this.Moder, 'PrimArea', arr)
      this.GetDictArea(this.choseArea)
    },
    handleChange(node){
      // console.log(node);
    },
    
    
    handleSizeChange(pageSize){
      this.pageSize = pageSize
      this.pageNum = 1
      this.GetDictArea(this.choseArea)
    },
    handleCurrentChange( pageNum ){
      this.pageNum = pageNum
      this.GetDictArea(this.choseArea)
    },
    handleSizeChangeEvent(pageSize){
      this.EventpageSize = pageSize
      this.EventpageNum = 1
      this.GetEventLogSchool(this.eventTable)
    },
    handleCurrentChangeEvent( pageNum ){
      this.EventpageNum = pageNum
      this.GetEventLogSchool(this.eventTable)
    },
    toggleVisibility(isHidden) {
      if(isHidden)
        this.containerWidth = '100%';
      else 
        this.containerWidth = 'calc(100% - 240px)';
    },
    // 搜索
    search(val) {
      // console.log("搜索内容",val)
      this.pageNum = 1
      this.searchform = {...val}
      
      this.getData()
    },
    // 重置
    reset(){
      this.searchform = {}
      this.$set(this.searchform,'Status', 0)
      this.$set(this.searchform,'Sort_value','SchoolName' )
      this.$refs.connsearch.addInitValue()
      this.getData()
    },
    LookDetails(row) {
      // console.log("装置详情",row)
      this.dialogForm = row
      this.dialogTableVisible = true
      this.getassertForm(row)
      this.GetEventLogSchool(row)
    },
    async getassertForm(row){
      const data = {
        Paging:{
          QueryPageNo: this.pageNum_assets,
          QueryPageLength: this.pageSize_assets
        },
        Filter:{
          PrimArea: row.PrimArea,
          SecondArea: row.SecondArea,
          SchoolName: row.SchoolName,
          // Status: row.Status,
          // OrderBy: ''
        }
      }

      const res = await connrequest('CenterGetDevice', data)
      res.Data.map(item => {
        item.KeepRunningTime = formatDuration(item.KeepRunningTime)
        item.onlineTotal  = item.OnlineDeviceCount +item.OfflineDeviceCount
        const currentTimeStamp = new Date().getTime();
        // 从时间戳创建另一个时间对象
        // const previousDateTimestamp = item.StatusChangeTime * 1000; // 乘以 1000 将秒转换为毫秒
        // 计算分钟差异
        // const timeDifferenceInMinutes = Math.floor((currentTimeStamp - item.StatusChangeTime) / (1000 * 60));
        // item.Status_Time = formatDuration(currentTimeStamp/1000 - item.LastReportStatusTime)
        item.StatusChangeTime =currentTimeStamp/1000 >= item.StatusChangeTime ? formatDuration(currentTimeStamp/1000 - item.StatusChangeTime):0
        item.CreateTime = parseTime(item.CreateTime)
        // item.LastReportStatusTime_copy = parseTime(item.LastReportStatusTime)
        item.StatusChangeTime = formatTime(item.StatusChangeTime)
        item.DiskUsedPct = !item.Disk_Sys_Total? 0: ((item.Disk_Sys_Used / item.Disk_Sys_Total) * 100).toFixed(1) * 1
        item.MemUsedPct = !item.Memeory_Total?0:((item.Memeory_Used / item.Memeory_Total) * 100).toFixed(1) * 1
        item.DiskSoftPct = !item.Disk_Software_Total?0:((item.Disk_Software_Used / item.Disk_Software_Total) * 100).toFixed(1) * 1
      })
      this.assertsForm = res.Data
      this.assets_total = res.Paging.TotalCount
      // this.assertsForm = res.Data
      // this.assertsForm.CreateTime = this.process_Time(this.assertsForm.CreateTime)
      // console.log("校区资产数据",this.assertsForm)
    },
    async GetEventLogSchool(row){
      const data = {
        Paging: {
          QueryPageNo: this.EventpageNum,
          QueryPageLength: this.EventpageSize
        },
        Filter: { 
          "StartTime": getNowDay('time'),
          "EndTime": getNowDay('23:59:59'),
          // "PrimArea": row.PrimArea,
          // "SecondArea": row.SecondArea,
          "SchoolName": row.SchoolName || ''
          // "DeviceName": row.DeviceName,
        }
      }
      const res = await connrequest('GetEventLog', data)
      res.Data = res.Data || []
      // console.log("事件汇总",res)
      res.Data = res.Data.map(item => {
        item.TransTime = parseTime(item.TransTime)
        return item
      })
      this.eventTable = res.Data
      this.EventTotal = res.Paging.TotalCount
    },
    getLastLevelLeafNodes(nodeList) {
      for (const node of nodeList) {
        if (node.children && node.children.length) {
          this.getLastLevelLeafNodes(node.children);
        } else {
          // console.log(this.lastLevelLeafNodes);
          this.lastLevelLeafNodes.push(node);
        }
      }
    },

    async submit(){
      this.getLastLevelLeafNodes(this.toData)
      // console.log("右侧框中的内容",this.toData,this.lastLevelLeafNodes);
      var selectData = []
      selectData = this.lastLevelLeafNodes.map(item => ({
        PrimArea: item.info[0] || '',
        SecondArea: item.info[1] || '',
        SchoolName: item.info[2] || '',
        SchoolID: item.info[3] || '',
        Action:1
      }));
      this.lastLevelLeafNodes = []
      const data = {
        Data: {
          ...selectData
        }

      }
      // console.log(data,selectData.length);
      if(selectData.length === 0) {
        this.$message.info('没有选择设备')
        return
      }
      const res = await connrequest('CreateRemoteCtrl', data)
      // console.log("选中的学校：", this.selectedSchools,data,res.Status.StatusCode);
       if(res.Status.StatusCode === 0){
          this.$message.success('重启成功')
          
          this.dialogDeviceVisible = false
          this.getData()
        }
    },
    async restart_Device(){
      this.toData = []
      this.dialogDeviceVisible = true
      // console.log("点击了")
      
      const data = {
        Paging:{
          QueryPageNo: this.Device_pageNum,
          QueryPageLength: this.Device_pageSize
        },
        Filter:{
          // PrimArea: '',
          // SecondArea: "",
          // SchoolName: this.searchform.SchoolName,
          Status: 1
          // OrderBy: this.searchform.Sort_value,
        }
      }
      const res = await connrequest('GetSchool', data) 
      // let b = []
      this.arr_divece = []
      res.Data.map(item=>{
        let arr = {}
        arr.SchoolID = item.SchoolID
        arr.PrimArea = item.PrimArea
        arr.SecondArea = item.SecondArea
        arr.SchoolName = item.SchoolName
        arr.Action = 1
        this.arr_divece.push(arr)
      })
      // console.log("获取在线设备信息",this.arr_divece,res);
      this.initializefromData(this.arr_divece)
    },
    
  }
};
</script>
<style scoped>
.box {
  background-color: lightblue;
  transition: width 0.5s; /* 添加过渡动画 */
}

.wl-transfer .transfer-title,
.wl-transfer ::v-deep .transfer-title {
  font-size: 14px !important;
  margin: 0 !important;
}
::v-deep .el-progress-bar {
  width: 70%; /* 设置进度条的宽度 */
  /* 添加其他样式属性 */
}
::v-deep .el-descriptions--medium.is-bordered .el-descriptions-item__cell{
    padding: 10px;
    width: 200px;
}
</style>
